<template>
	<view class="apps">
		<uv-navbar placeholder>
			<template v-slot:left>
				<view class="flex aic">
					<view class="flex jcc bdr100 bd1s bdb1 bdl1 bdr1 bdt1" >
						<uv-icon name="search" size="20" @click="handle('/pages/index/search',0)"></uv-icon>
					</view>
					<view class="f16 fw600 ml20">发现</view>
					<view class="f14 fw400 ml20" @click="handle('/pages/forum/forum',1)">广场</view>
				</view>
			</template>
		</uv-navbar>
		<view class="pr">
			<uv-swiper 
				:list="banner"
				keyName="image"
				previousMargin="20rpx" 
				nextMargin="20rpx" 
				circular 
				bgColor="white"
				@click="swpierHandle"
				radius="10" >
			</uv-swiper>
		</view>
		<view class="mlr20 mt20 pt20 bgwhite bdr20">
			<uv-grid :border="false" col="4" v-if="nav.length > 0">
			<block v-for="(item,index) in nav" :key="index" >
				<uv-grid-item v-if="item.type=='link'" @click="handle(item.url,item.is_login)">
					<uv-icon :name="item.image" size="50"></uv-icon>
					<view class="mt10 mb20 flex jcc f26r fw400">{{item.title}}</view>
				</uv-grid-item>
				<uv-grid-item v-else>
					<uv-button open-type="contact" @contact="contactBack" customStyle="height:auto;border-width:0 !important;">
						<view class="flex fdc">
							<uv-icon :name="item.image" size="50"></uv-icon>
							<view class="mt10 mb20 flex jcc f26r fw400">{{item.title}}</view>
						</view>
					</uv-button>
					
				</uv-grid-item>
			</block>
			</uv-grid>
		</view>
		<view class="mlr10 mt20 pt20 bgwhite bdr20 flex fdc" v-if="activityWeek.length >0">
			<view class="flex aic jcsb mb20 plr20 mlr10">
				<view class="f14 fw600">热门活动</view>
				<view class="f26r fw400 c999">本周演出</view>
			</view>
			<uv-scroll-list @right="right" @left="left">
				<view class="flex"  v-if="activityWeek.length >0">
					<view class="flex fdc pr mlr10"  v-for="(item,index) in activityWeek" :key="index" @click="handle('/pages/index/detail?id='+item.id,0)">
						<image :src="item.activity.image" mode="widthFix" style="width: 230rpx; height:300rpx;"></image>
					</view>
				</view>
			</uv-scroll-list>
		</view>
		<view class="mlr10 mt20 pt20 bgwhite bdr20 flex fdc">
			<uv-sticky bgColor="#fff">
				<uv-tabs :list="categorys" lineWidth="30" @click="handleTabs" keyName="title"
				lineColor="#f5c185" 
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)',
					fontSize:'14px',
				}"
				:inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)',
					fontSize:'14px',
				}" 
				itemStyle="padding-left: 15rpx; padding-right: 15rpx; height: 60rpx;font-size:14px;">
					<template v-slot:right>
						<view style="padding-left: 4px;" @click="handle('/pages/index/search',0)">
							<uv-icon name="list" size="21" bold></uv-icon>
						</view>
					</template>
				</uv-tabs>
			</uv-sticky>
			<view class="mt20">
			<uv-grid :border="false" col="2" v-if="list.length > 0">
				<uv-grid-item @click="handle('/pages/index/detail?id='+item.id)" v-for="(item,index) in list" :key="index">
					<view class="flex fdc mb20 pr plr10">
						<image :src="item.activity.image" mode="widthFix" style="width: 345rpx; height:442rpx;"></image>
						<view class="activePositon">
							<view class="pb10 flex aic pl20" v-if="item.activity.tags.length >0">
								<view class="plr10 ptb05 mr10 bdr20 c333 f22r" :style="`background-color:`+tag.bgcolor+ `;`" v-for="(tag,i) in item.activity.tags" :key="i">{{tag.tag_name}}</view>
							</view>
							<view class="f26r fw600 c333 pl10">{{item.activity.title}}</view>
							<view class="f22r flex t3hd c999 pl10">{{item.activity.description}}</view>
							<view class="flex aic pl10">
								<uv-avatar size='18' :src="item.user.avatar"></uv-avatar><view class="ml10 f22r c999">{{item.user.nickname}}</view>
							</view>
							<view class="flex jcsb aic">
								<view class="flex aic">
									<view class="flex aic mr10" v-if="item.regist_type.includes('audience')">
										<uv-badge :isDot="true" type="success"></uv-badge><view class="f22r c999">观众报名中</view>
									</view>
									<view class="flex aic mr10" v-if="item.regist_type.includes('volunteer')">
										
										<uv-badge :isDot="true" type="error" v-if="item.voters_count >= item.voters"></uv-badge>
										<uv-badge :isDot="true" type="success" v-else></uv-badge>
										<view class="f22r c999" v-if="item.voters_count >= item.voters">志愿者已满</view><view class="f22r c999">志愿者报名中</view>
										
									</view>
								</view>
								<view v-if="item.regist_type.includes('audience') && item.tickets.includes('0')">
									<uv-tags text="FREE" type="success" plain plainFill size="mini"></uv-tags>
								</view>
							</view>
						</view>
					</view>
				</uv-grid-item>
			</uv-grid>
			</view>
		</view>
	</view>
</template>
<script setup>
	import { util } from '@/common/util.js'
	import { ref , reactive, nextTick, computed } from 'vue'
	import { onLoad, onShow, onHide,onReachBottom } from '@dcloudio/uni-app'
	const 	tabActive=ref(0),banner=ref(null),nav=ref([]),activityWeek=ref([]),
	categorys=ref([{title:'推荐',follow:0,category_id:0,is_login:0},{title:'关注',follow:1,category_id:0,is_login:1}]),list =ref([]),page=ref(1),more=ref(true)
	let arrs = reactive({
		page:1,
		category_id:0,
		follow:0,
		is_login:0,
		more:true,
	})
	onLoad(()=>{
		getBanner(),getNav(),getActivity(),getCategory(),getList()
	})
	onReachBottom(()=>{
		if(arrs.more){
			getList()
		}
	})
	const getBanner = () => {
		util.request({url:'/index/banner',type:'get'}).then((rlt) =>{
			banner.value = rlt.data;
		})
	}, getNav = () => {
		util.request({url:'/index/nav',type:'get'}).then((rlt) =>{
			nav.value = rlt.data;
		})
	}, getActivity  = () =>{
		util.request({url:'/index/activity',type:'get'}).then((rlt) =>{
			activityWeek.value = rlt.data;
		})
	},getCategory = () =>{
		util.request({url:'/index/category',type:'get'}).then((rlt) =>{
			categorys.value.push(...rlt.data);
			console.log(categorys.value);
		})
	},getList = ()=>{
		util.request({url:"/index/times",type:"post",data:arrs}).then((rlt)=>{
			if(rlt.code == 1){
				if(arrs.page == 1){
					list.value =rlt.data
				}else{
					list.value.push(... rlt.data);
				}
				if(rlt.data.length<10){
					arrs.more=false
				}
				arrs.page++;
			}
		})
	},handle=(e,is_login)=>{
		if(is_login == 1){
			
		}
		uni.navigateTo({
			url:e,
		})
	},left=()=>{
		console.log('left');
	},right=()=>{
		console.log('right')
	},contactBack = (e)=>{
		console.log(e);
	}
	
	const swpierHandle = (e)=>{
		const bData = banner.value;
		uni.setStorageSync('mpWebUrl',bData[e].linkurl);
		uni.navigateTo({
			url:'/pages/custom/custom'
		})
	}, handleTabs = (e) =>{
		arrs = Object.assign(arrs,e);
		arrs.page = 1;
		arrs.more = true;
		getList()
		
	}
	
</script>
<style scoped lang="scss">
	.activePositon{position: absolute;padding:10rpx; bottom:10rpx;left:2rpx;right:1rpx;display: flex; flex-direction: column;background:linear-gradient(to bottom,rgb(255,255,255,0.3),rgb(255,255,255,0.1));}
</style>